<template>
    <div :class="{'recomendPage':loadOver,'skt-loading':noData}" class="recomendIndex ">
            <div class="my-banner" v-if="indexData.banner&&indexData.banner.length>0">
                <div class="swiper-container swiper-container1" id="swiper1" ref="swiper1" >
                    <div class="swiper-wrapper">
                        <div class="swiper-slide skeleton"  v-for="(item,index) in indexData.banner" :key="index">
                            <!--<img :src=item onerror="this.onerror=null;this.src='https://media.71ydj.com/FitPjkxAJxdRFRVrDCq1sTKxxgtf'" alt="">-->
                            <!--<router-link :to="{path:item.link}">-->
                            <img :src=item.head_photo onerror="this.onerror=null;this.src='https://media.71ydj.com/FitPjkxAJxdRFRVrDCq1sTKxxgtf'" alt="">
                            <!--<img src="@as/img/xuanchuan_banner.png" alt="">-->
                            <!--</router-link>-->
                        </div>
                    </div>
                </div>
            </div>
            <Loading  v-if="notMore"  class="empty-text-wrap" />
        <!--骨架屏 数据未渲染出来时候展示-->
        <!--<div class="news_list_box" v-if="noData">-->
            <!--<div class="article1 flex"    v-for="i in 6" :key=i>-->
                    <!--<div class="article "  >-->
                        <!--<p class="article_title skeleton">a</p>-->
                        <!--<p class="article_source skeleton">a</p>-->
                        <!--<div class="article_info">-->
                              <!--<span class="article_num skeleton">-->
                                    <!--<img src="@as/img/eyes.png" alt="">人看过</span>-->
                            <!--<span class="article_time skeleton">a</span>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--<div class="article_img skeleton ">-->
                    <!--<img src='a' class="skeleton" onerror="this.onerror=null;this.src='https://media.71ydj.com/FoKciWV_KbpGB65lMhHTCCvt82ca'" alt="">-->
                <!--</div>-->
                <!--</div>-->
            <!--</div>-->
            <mu-paper :z-depth="1" class="demo-loadmore-wrap" >
                <mu-container ref="container" class="demo-loadmore-content">
                    <mu-load-more  :loading="loading" @load="load">
                        <div >
                            <!--一张图模式-->
                            <div class="news_list_box"   v-for="(item,index) in indexData.new_list" :key="index" v-show="index<=2">
                                <div class="article1 flex" v-if="item.status==1" @click.stop="toNewsDetails(item)">
                                    <div class="article " >
                                        <p class="article_title skeleton">{{item.title}}</p>
                                        <p class="article_source skeleton">{{item.org_name}}</p>
                                        <div class="article_info">
                                                <span class="article_num skeleton">
                                                    <img src="@as/img/eyes.png" alt="">{{item.people_num}}人看过</span>
                                            <span class="article_time skeleton">{{getArticleTime(item.create_time)}}</span>
                                        </div>
                                    </div>
                                    <div class="article_img skeleton" v-if="item.status==1">
                                        <img :src=item.photo v-if="item.photo" onerror="this.onerror=null;this.src='https://media.71ydj.com/FoKciWV_KbpGB65lMhHTCCvt82ca'" alt="">
                                    </div>
                                </div>
                                <div class="article3 " v-if="item.status==2" @click.stop="toNewsDetails(item)">
                                    <p class="article_title skeleton">{{item.title}}</p>
                                    <div class="article_img3 skeleton">
                                        <img :src=item2.photo_address class="skeleton" alt="" onerror="this.onerror=null;this.src='https://media.71ydj.com/FoKciWV_KbpGB65lMhHTCCvt82ca'" v-for="(item2,index2) in item.photo_list" :key="index2" v-show="index2<3">
                                    </div>
                                    <p class="article_source skeleton">{{item.org_name}}</p>
                                    <div class="article_info">
                                <span class="article_num skeleton"><img src="@as/img/eyes.png"
                                                               alt="">{{item.people_num}}人看过</span>
                                        <span class="article_time skeleton" >{{getArticleTime(item.create_time)}}</span>
                                    </div>
                                </div>
                                <div class="article2 " v-if="item.status==5" @click.stop="toNewsDetails(item)">
                                    <p class="article_title skeleton">{{item.title}}</p>
                                    <p class="article_source skeleton ">
                                        <img :src=item.photo alt="" v-if="item.photo">
                                        {{item.org_name}}
                                    </p>
                                    <div class="article_info skeleton">
                                        <span class="article_num skeleton"><img src="@as/img/eyes.png" alt="">{{item.people_num}}人看过</span>
                                        <span class="article_time skeleton">{{getArticleTime(item.create_time)}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--党微视-->
                        <div v-if="indexData.video_list&&indexData.video_list.length>0">
                            <div class="video_modular news_list_box">
                                <div class="modular_title skeleton">党建微视</div>
                                <div class="video_page">
                                    <div class="video" :style="{width:indexData.video_list&&width*indexData.video_list.length+'px'}">
                                        <div class="video_wrap" v-for="(item, index) in indexData.video_list" :key="index" @click="toVideoDetails(item.id,item.class_id)">
                                            <div class="video_list">
                                                <div class="video_content">
                                                    <img :src="item.low_source" alt
                                                         onerror="this.onerror=null;this.src='https://media.71ydj.com/FitPjkxAJxdRFRVrDCq1sTKxxgtf'">
                                                    <span class="video_time">{{getMinite(item.video_duration)}}</span>
                                                    <span class="video_play iconfont iconplaycircle1"></span>
                                                </div>
                                                <div class="video_info">
                                                    <p class="video_title">{{item.title}}</p>
                                                    <span class="video_num"><img src="@as/img/eyes.png" alt="">2人看过</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div v-if="indexData.new_list">
                            <div class="news_list_box"   v-for="(item,index) in indexData.new_list" :key="index" v-show="index>2">
                                <div class="article1 flex" v-if="item.status==1" @click.stop="toNewsDetails(item)">
                                    <div class="article " >
                                        <p class="article_title">{{item.title}}</p>
                                        <p class="article_source">七一云党建</p>
                                        <div class="article_info">
                                                <span class="article_num">
                                                    <img src="@as/img/eyes.png" alt="">{{item.people_num}}人看过</span>
                                            <span class="article_time">{{getArticleTime(item.create_time)}}</span>
                                        </div>
                                    </div>
                                    <div class="article_img" v-if="item.status==1">
                                        <img :src=item.photo alt="" v-if="item.photo">
                                    </div>
                                </div>
                                <div class="article3 " v-if="item.status==2" @click.stop="toNewsDetails(item)">
                                    <p class="article_title">{{item.title}}</p>
                                    <div class="article_img3">
                                        <img :src=item2.photo_address alt="" onerror="this.onerror=null;this.src='https://media.71ydj.com/FoKciWV_KbpGB65lMhHTCCvt82ca'" v-for="(item2,index2) in item.photo_list" :key="index2" v-show="index2<3">
                                    </div>
                                    <p class="article_source">{{item.org_name}}</p>
                                    <div class="article_info">
                                <span class="article_num"><img src="@as/img/eyes.png"
                                                               alt="">{{item.people_num}}人看过</span>
                                        <span class="article_time">{{getArticleTime(item.create_time)}}</span>
                                    </div>
                                </div>
                                <div class="article2 " v-if="item.status==5" @click.stop="toNewsDetails(item)">
                                    <p class="article_title">{{item.title}}</p>
                                    <p class="article_source"><img :src=item.head_photo alt="">{{item.org_name}}</p>
                                    <div class="article_info">
                                        <span class="article_num"><img src="@as/img/eyes.png" alt="">{{item.people_num}}人看过</span>
                                        <span class="article_time">{{getArticleTime(item.create_time)}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </mu-load-more>
                </mu-container>
            </mu-paper>
        <div class="loading" v-if="loadOver" :class="{'notPageOne':p>1}">{{loaded}}</div>
        </div>
        <!--新闻列表-->
        <!--<div class="loading" v-if="loadOver">{{loaded}}</div>-->
</template>

<script>
    import Swiper from "swiper";
    import Loading from '@/components/emptyText.vue';
    import {formatDateTime} from '@/views/home/utils'
    export default {
        data() {
            return {
                num: 10,
                p: 1,
                loading: false,
                loadOver:false,
                loaded: "加载更多...",
                notMore: false,//没有更多数据
                method: "",
                link: '',
                noData:true,
                indexData: {
                    banner:[],
                    new_list:[],
                    video_list:[]
                },
                width:232,
                text: 'List'
            }
        },
        computed:{
            getArticleTime(){
                return function (val) {
                    return formatDateTime(val)
                }
            },
            getMinite(){
                return function (val) {
                    var h = parseInt(val/3600)>0?parseInt(val/3600):'';
                    var m =Math.floor((val -h*3600)/60)>=10?Math.floor((val -h*3600)/60):'0'+Math.floor((val -h*3600)/60);
                    var s =Math.floor((val-h*3600-m*60))>=10?Math.floor((val-h*3600-m*60)):'0'+Math.floor((val-h*3600-m*60));
                    if(h>0){
                        if(m>0){
                            return h+':'+m+':'+s
                        }else{
                            return h+':'+"00"+':'+s
                        }
                    }else{
                        if(m>0){
                            return m+":"+s
                        }else{
                            return "00"+":"+s
                        }
                    }
                }
            },
        },
        mounted() {
            this.initData(this.p)
            new Swiper("#swiper1", {
                autoplay: true,
                lazy: true,
            });
            this.$progress.done();
        },
        components:{
            Loading
        },
        methods: {
            initData(p) {
                this.$http
                    .get("app/My/recommend_page", {
                        p: p,
                        page: 10,
                        org_id:JSON.parse(Cookies.get('user_71ydj')).organization_id,
                        uid: JSON.parse(Cookies.get("user_71ydj")).id,
                    })
                    .then(res => {
                        if(res.data.new_list.length){
                            this.indexData.new_list.push(...res.data.new_list);
                        }
                        if(res.data.video_list.length){
                            this.indexData.video_list.push(...res.data.video_list);
                        }
                        console.log(res)
                        if(res.data.video_list.length || res.data.new_list.length){
                            // this.noData =false;
                        }
                        this.loadOver =false;

                        if(this.p!=1){
                            if(res.data.new_list.length){
                                this.notMore =false;
                                this.noData =false;
                            }else{
                                this.loadOver =true;
                                this.loading =false;
                                this.loaded='没有更多数据了'
                                return false
                            }
                        }else {

                            if(!res.data.new_list.length&&!res.data.video_list.length){
                                this.notMore =true;
                                this.loadOver =false;
                                this.noData =true;
                            }else{
                                if(res.data.new_list.length<=10&&res.data.new_list.length!=0){
                                    this.loadOver =true;
                                    this.notMore =false;
                                     this.noData =false;
                                    this.loaded='没有更多数据了';
                                }
                            }
                        }

                        // if (res.data.length < 10) {
                        //     console.log(this.indexData)
                        //     this.loaded = "没有更多";
                        //     this.loading = true;
                        //     this.notMore = false;
                        //     this.loadOver =false;
                        //     this.indexData = res.data;
                        //     return;
                        // }
                        // if(p==1){
                        //     this.indexData = res.data;
                        // }else{
                        //     console.log(res.data);
                        //     if(res.data.new_list.length){
                        //         this.indexData.new_list.push(...res.data.new_list);
                        //     }else{
                        //         this.loadOver =true;
                        //         this.loading =false;
                        //         this.loaded='没有更多数据了'
                        //         return false
                        //     }
                        // }
                        // this.loading = false;
                    });
            },
            load() {
                if (!this.loadOver) {
                    this.loading = true;
                    clearTimeout(this.method);
                    this.method = setTimeout(() => {
                        this.p = this.p + 1;
                        this.initData(this.p);
                        this.loading =false;
                    }, 2000);
                }
            },
            toNewsDetails(items) {
                console.log(items)
                if(items.status==1){
                    //新闻模式
                    this.$router.push({path: 'propaganda/details/newsDetails', query: {id: items.id, type: items.type}})
                }else if(items.status==2){
                    //相册模式
                    this.$router.push({path: 'propaganda/details/albumDetails', query: {id: items.id}})
                }else if(items.status==5){
                    this.$router.push({path: 'propaganda/details/loveDetails', query: {id: items.id}})
                    //一颗红心
                }
                // this.$router.push({path: 'propaganda/details/newsDetails', query: {id: 111, type: 2}})
            },
            toAlbumDetails() {
                this.$router.push({path: 'propaganda/details/albumDetails', query: {id: 101}})
            },
            toLoveDetails() {
                this.$router.push({path: 'propaganda/details/loveDetails', query: {id: 33}})
            },
            toVideoDetails(id, class_id) {
                this.$router.push({path: 'propaganda/videoList/videoList', query: {id: id, class_id: class_id}})
            },
        },


    }
</script>

<style scoped lang="scss">
    p {
        margin: 0;
        padding: 0;
    }

    /*banner*/
    .my-banner {
        width: 100%;
        height: 150px;
        padding: 8px 0;
        /*background-image: url("../../../assets/img/propagandaIcon/xuanchuan_head_bg@2x.png");*/
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    #swiper1 {
        margin: 0 auto;
        width: 343px;
        height: 100%;
    }
    /*#swiper1 .swipe*/
    .swiper-slide {
        width: 343px;
        height: 142px;
        box-shadow: 0px 5px 12.5px 0px rgba(235, 77, 68, 0.3);
        border-radius: 4px;
    }
    .swiper-slide a{
        display: inline-block;
        width: 100%;
        height: 100%;
    }

    .my-banner img {
        height: 100%;
        width: 100%;

    }




    .news_list_box {
        width: 343px;
        overflow: hidden;
        border-bottom: 1px solid #ddd;
        margin: 0 auto;
    }

    /*一张图片的新闻*/
    .article {
        width: 200px;
        float: left;
        margin-top: 20px;
    }

    .article_title {
        max-height: 48px;
        font-size: 16px;
        color: #333333;
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .article_source {
        font-size: 12px;
        color: #999999;
        margin-top: 10px;
        height: 25px;
        line-height: 25px;
        display: flex;
    }

    .article_source img {
        width: 25px;
        height: 25px;
        margin-right: 8px;
        border-radius: 50%;
    }

    .article_info {
        display: inline-block;
        width: 100%;
        font-size: 12px;
        color: #999;
        margin-top: 10px;
    }

    .article_info .article_num {
        float: left;
    }

    .article_num img {
        width: 13px;
        height: 11px;
        display: inline-block;
        margin-right: 6px;

    }

    .article_info .article_time {
        float: right;
        margin-right: 15px;
    }

    .article_img {
        width: 130px;
        height: 97px;
        float: right;
        margin-left: 20px;
        margin-top: 20px;
    }

    .article_img img {
        width: 130px;
        height: 97px;
        border-radius: 4px;
    }

    /*没有图片的新闻*/
    .article2 {
        margin-top: 20px;
    }

    /*3张图片*/
    .article3 {
        width: 360px !important;
        margin: 20px 0 0 0
    }

    .article_img3 {
        width: 100%;
        margin: 10px 0 0 0;
        overflow: hidden;
        display: flex;
    }

    .article_img3 img {
        width: 110px;
        height: 83px;
        border-radius: 4px;
        margin-right: 7px;
    }

    .article_img3 img:last-child {
        margin-right: 0;
    }

    /*党微视*/
    .video_modular {
        overflow: hidden;
    }

    .video_modular .modular_title {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        background: url("../../../assets/img/zuzhi (7).png") no-repeat;
        background-size: 4px 29px;
        background-position: 0;
        padding-left: 16px;
        margin-top: 22px;
        margin-bottom: 14px;
    }

    .gridlist-inline-demo {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .mu-grid-tile-titlebar {
        display: none;
    }
    .video_page{
        width: 100%;
        overflow-x: scroll;
        &::-webkit-scrollbar {
            display: none;
        }
    }
    .video {
        width: 1000px;
        /*height: 200px;*/
        overflow-x: scroll;
        overflow-y: hidden;
        /*display: -webkit-box;*/
        /*display: -webkit-flex;*/
        /*display: flex;*/
    }
    .video_wrap{
        display: inline-block;
        vertical-align: top;
        margin: 0 3px;
        width: 226px;
        height: 100%;
    }
    .video_wrap .video_list{
        width: 100%;
    }
    .video_content {
        position: relative;
        height: 170px;
        width: 100%;
    }
    .video_list .video_content img {
        width: 100%;
        height: 170px;
        border-radius: 4px;
    }

    .video_list .video_content .video_time {
        font-size: 10px;
        color: #fff;
        position: absolute;
        bottom: 6px;
        left: 10px;
        padding: 2px 4px;
        background:rgba(4,4,4,0.25);
        border-radius:16px;
        color: white;

    }
    .video_list .video_content .iconfont{
        position: absolute;
        right:18px;
        bottom: 7px;
        width: 34px;
        height: 34px;
        &::before{
            font-size: 28px;
            opacity: 0.7;
        }
    }

    .video_info {
        font-size: 14px;
        color: #999999;
    }
    .flex{
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
    }
    .video_info .video_title {
        width: 207px;
        font-size: 14px;
        color: #333333;
        box-sizing: content-box;
        line-height: 19px;
        height: 38px;
        /*max-height: 38px;*/
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin: 0 0 10px 0;
        padding-top: 15px;
    }
    .video_info .video_num{
        display: inline-block;
        margin-bottom: 15px;
    }
    .video_info .video_num img {
        width: 13px;
        height: 11px;
        margin-right: 6px;
    }
    .mu-load-more /deep/ .mu-circle-spinner{
        border-color: #e5e5e5;
    }
    .recomendPage /deep/ .mu-infinite-scroll{
        display: none;
        height: 0;
    }
    .recomendIndex /deep/.mu-elevation-1{
        box-shadow: 0 0.05333rem 0.02667rem -0.02667rem rgba(0,0,0,0), 0 0.02667rem 0.02667rem 0 rgba(0,0,0,0), 0 0.02667rem 0.08rem 0 rgba(0,0,0,0); ;
        -webkit-box-shadow:0 0.05333rem 0.02667rem -0.02667rem rgba(0,0,0,0), 0 0.02667rem 0.02667rem 0 rgba(0,0,0,0), 0 0.02667rem 0.08rem 0 rgba(0,0,0,0); ;
    }
    .recomendIndex .loading {
            width: 343px;
            margin: 0 16px ;
            font-size: 14px;
            color: #dddddd;
            clear: both;
            line-height: 61px;
            text-align: center;
            .notPageOne{
                margin-top: -50px;
            }
    }
    .recomendIndex .empty-text-wrap{
        width: 100%;
        height: 40vh;
        margin-top: 100px;
    }
</style>